<template>
	<view class="content">
		<view class="main">
			<textarea class="areainput" v-model="feedbackQuery.text" placeholder="请在此输入你的留言" maxlength="400" @input="checkstr" />
			<view class="tips">
				<text style="padding: 20rpx;text-align: end;color: #333333;font-size: 20rpx;">{{strtips}}字</text>
				<hr style="margin: 0 20rpx;border: 0.5px solid #ccc;" />
			</view>
			<view class="feedbtn">
				<button type="default" class="feedbtn_submit" @click="submitfeed">提交</button>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				strtips: '200',
				// 意见反馈参数
				feedbackQuery: {
					text: ''
				}
			}
		},
		methods: {
			checkstr(e) {
				// this.myareastr = e.detail.value
				// let strlen = this.myareastr.length
				// console.log(strlen)
				// if(strlen < 200) {
				// 	this.strtips = '还可输入'+(200-strlen)
				// }else if (strlen >= 200) {
				// 	this.strtips = '还可输入0'
				// 	uni.showModal({
				// 		content: '最多输入200字',
				// 		showCancel: false
				// 	});
				// }
			},
			async submitfeed() {
				if (!this.feedbackQuery.text) {
					return uni.$toast('留言不能为空')
				}
				const res = await this.$http.request('/api/v1/opinion/create', this.feedbackQuery)
				if (res.code == 200) {
					uni.$toast('提交成功', true)
					uni.navigateBack({
						delta: 1
					})
					return
				}
				uni.$toast('提交失败')
			},
		}
	}
</script>

<style>
	* {
		box-sizing: border-box;
	}

	.content {
		background-color: #F5F5F5;
		height: 100vh;
		padding: 20rpx;
	}

	.main {
		height: 100%;
		width: 100%;
		background-color: #fff;
	}

	.areainput {
		padding: 30rpx 20rpx;
		background-color: #FFFFFF;
		width: 100%;
	}
	.tips {
		display: flex;
		flex-direction: column;
	}
	.feedbtn_submit {
		background-color: #B91C27!important;
		border-radius: 60rpx;
		width: 500rpx;
		color: #fff!important;
		margin-top: 200rpx;
	}
</style>
